[#ftl]
[@define "agile.CssRuleEditor","agile._MetadataEditor"]
 [#assign templateString]
 	<table>
	<tr>
	<td style="display:none" data-dojo-attach-point="pseudoSelectorNode"><div data-dojo-attach-point="pseudoSelector" data-dojo-type='agile.NumberComboBox' options="{this_pseudoSelectorOptions}" title="{i18n_pseudo_selector_tooltip}"></div></td>
	<td><div data-dojo-type='agile.NumberComboBox' options="{this_selectors}" width="100%" data-dojo-attach-point="selector" placeHolder="CSS name" title="{i18n_style_selector_tooltip}"></div></td>
	<td width="2px"></td>
	<td width="50%"><div data-dojo-type='agile.NumberComboBox' data-dojo-attach-point="content" width="100%" placeHolder="CSS value" title="{i18n_style_rule_tooltip}"></div></td>
	<td width="2px"></td>
	<td width="10px"><img class='agileButton agileButtonAdd' data-dojo-attach-point="addButton"></img></td>
	<td width="10px"><img class='agileButton agileButtonRemove' data-dojo-attach-point="removeButton"></img></td>	
	</tr>
	<tr>	
	<td colspan="7" valign="top" height="80px">
		<table style="width:100%;height:100%">
			<tr>
			<td width="70%" valign="top">
				<select data-dojo-attach-point="styleOptions" multiple="false" data-dojo-type="dijit.form.MultiSelect" style="width:100%;height:100%"></select>
			</td>		
			<td valign="center"><div data-dojo-attach-point="previewNode" style="width:100%;height:100%;text-align:center;">SAMPLE</div></td>
			</tr>
		</table>
	</td>
		
	</tr>	
	</table>
 [/#assign] 
 templateString:"${templateString?js_string}",selectors:"",defaultCssText:"width:100%!important;height:100%!important;text-align:center;",currentCssMap:null
	,init:function(){
		agile.stopKeyEvent(this.styleOptions);
		this.currentCssMap = {};
		this.own(
			aspect.after(this.content,"onEnterKeyPress",lang.hitch(this,"addOption"),true)
			,on(this.addButton,"click",lang.hitch(this,"addOption"))			
			,on(this.removeButton,"click",lang.hitch(this,function(){
				var selector = this.selector.get("value");
				if(selector != ""){
					this.selector.reset1("value","");
					this.content.reset1("value","");
				}							
				var options = this.styleOptions.getSelected();
				if(options.length > 0){
					this.styleOptions.removeOptions(options);
				}
			}))
		);
		this.styleOptions.on("click",lang.hitch(this,function(){
			var options = this.styleOptions.getSelected(); 
			this.selector.reset1("value",options.length >0 ? options[0].value:"");
			this.content.reset1("value",options.length > 0 ? this.currentCssMap[options[0].value]:"");			
		}));	
		this.selector.on("change",lang.hitch(this,function(value){
			this.content.reset1("value","");			
		}));	
		this.own(
			aspect.after(this.styleOptions,"replaceOptions",lang.hitch(this,function(options){
				this.onChange(this.get("value"),this.name,this.htmlName);
				array.forEach(options,function(option){this.currentCssMap[option.value] = option.label.split(":")[1]},this);
			}),true)

			,aspect.after(this.styleOptions,"removeOptions",lang.hitch(this,function(options){
				//console.log("after removeOptions: options=",options,"this.currentCssMap=",this.currentCssMap);
				array.forEach(options,function(opt){
					delete this.currentCssMap[opt.value];	
				},this);
//				console.log("##this.currentCssMap=",this.currentCssMap);
				this.onChange(this.get("value"),this.name,this.htmlName);				
			}),true)
		);
	}
 	,addOption:function(options){
 		if(options){
 			this.styleOptions.replaceOptions(options);
 			return;
 		}
		var selector = this.selector.get("value");
		var value = this.content.get("value");
//			//console.log("@@@@@=",selector,value);
		if(selector == "*"){//in case multiple css rules are defined in the content
			var styles = value.split(";")
			var options = [];
			for(var i = 0; i < styles.length; i++){
				var kv = styles[i].split(":");
				options.push({label:styles[i],value:kv[0]});
				this.currentCssMap[kv[0]] = kv[1];
			}		
			this.styleOptions.replaceOptions(options);
		}else if(selector && value){
			if(selector == "content"){
				value = "\"" + value +"\"";
			}
			this.currentCssMap[selector] = value;
			this.styleOptions.replaceOptions([{label:selector +":" + value,value:selector}]);			
		}
		this.selector.reset1("value","");
		this.content.reset1("value","");
		this.selector.focus();
 	}
	,onChange:function(value,name,htmlName){
//		console.log(this.declaredClass,lang.replace("[CssRuleEditor] name={0},htmlName={1},value={2}",[name,htmlName,value]));
		value = agile.adviseCssRules(value);
//		console.log(this.declaredClass,"[CssRuleEditor] cssText=",value);		
		this.previewNode.style.cssText = this.defaultCssText + value;
		
		if(this.context){
			var ownerWidget = this.context.getCurrentWidget();
			if(ownerWidget){
//				if(name.indexOf(":") == 0){
//					//pseudo class/element
//					var pseudo = ownerWidget.metadata("parameters.pseudo");
//					if(pseudo){
//						pseudo[htmlName] = value;						
//					}else{
////						ownerWidget.metadata("parameters.pseudo.pseudoClass","pseudo"+(new Date().getTime()));
//						pseudo = {pseudoClass:"pseudo"+(new Date().getTime())};
//						pseudo[htmlName] = value;
////						pseudo.pseudoClass = "pseudo"+ownerWidget.get("id");
//						ownerWidget.metadata("parameters.pseudo",pseudo);
//						ownerWidget.metadata("parameters.class",pseudo.pseudoClass);
//					}
//					agile.replacePseudoRule("." + pseudo.pseudoClass + htmlName,value);
//					
//					if(ownerWidget.delegate){
//						if(!domClass.contains(ownerWidget.delegate.domNode,pseudo.pseudoClass)){
//							domClass.add(ownerWidget.delegate.domNode,pseudo.pseudoClass)
//						}
//					}else{
//						if(!domClass.contains(ownerWidget.domNode,pseudo.pseudoClass)){
//							domClass.add(ownerWidget.domNode,pseudo.pseudoClass)
//						}
//					}	
//				}else{
//					 if(ownerWidget.delegate){
//						ownerWidget.delegate.domNode.style.cssText += ";"+value;
//					 }else{
//						 ownerWidget.domNode.style.cssText += ";"+value;
//					 }
//				}
//				console.log(this.declaredClass,"[CssRuleEditor] set style....");
				var nodes = ownerWidget.getStyleNodes();
				for(var i = nodes.length-1; i >=0; i--){
					//domClass.add(nodes[i],pseudoClassName);
					nodes[i].style.cssText += ";"+value;
				}						
			}
		}
	}

 	,get:function(name){
		if(name == "value"){
			return this.styleOptions.getLables(";")
//			return this.currentCssText;
		}
		return this.inherited(arguments);
	}
 	,set:function(name,value){
		if(name == "value"){
//			if(this.htmlName.indexOf(":") == 0){
//				//pseudo class/element
//				var ownerWidget = this.context.getCurrentWidget();
//				if(ownerWidget){
//					var pseudo = ownerWidget.metadata("parameters.pseudo");
//					if(pseudo){
//						value = pseudo[this.htmlName];
//					}
//				}
//			}
			delete this.currentCssMap;
			this.currentCssMap = {};
			this.selector.reset1("value","");
			this.content.reset1("value","");
			this.styleOptions.clearOptions();
			this.styleOptions.setValues(value,";");
			
			if(value){
				this.previewNode.style.cssText = this.defaultCssText + agile.adviseCssRules(value);
			}
		}else if(name == "disabled" || name == "readOnly"){
			this.selector.set(name,value);
			this.content.set(name,value);			
			this.styleOptions.set(name,value);
			style.set(this.addButton,"visibility",value?"hidden":"visible");
			style.set(this.removeButton,"visibility",value?"hidden":"visible");
		}
		else if(name == "context"){ 			
			this.context = value;
		}
		else{
			this.inherited(arguments);
		}
	}
 	,reset1:function(name,value){
		if(name == "value"){			
//			if(this.htmlName.indexOf(":") == 0){
//				//pseudo class/element
//				var ownerWidget = this.context.getCurrentWidget();
//				if(ownerWidget){
//					var pseudo = ownerWidget.metadata("parameters.pseudo");
//					if(pseudo){
//						value = pseudo[this.htmlName];
//					}
//				}
//			}
			delete this.currentCssMap;
			this.currentCssMap = {};
			this.selector.reset1("value","");
			this.content.reset1("value","");
			this.styleOptions.clearOptions();
			this.styleOptions.setValues(value,";");
			if(value){
				this.previewNode.style.cssText = this.defaultCssText + agile.adviseCssRules(value);
			}
		}else if(name == "disabled" || name == "readOnly"){
			this.selector.set(name,value);
			this.content.set(name,value);			
			this.styleOptions.set(name,value);
			style.set(this.addButton,"visibility",value?"hidden":"visible");
			style.set(this.removeButton,"visibility",value?"hidden":"visible");
		}else if(name == "context"){ 			
			this.context = value;
		}
		else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){
		return true;
	}
[/@]
